<script setup lang="ts">
import Page from '@/components/Page.vue';
import { http } from '@/services/http';
import type { ResponseData, Users, UsersPageData } from '@/types';
import { USERS_OPTIONS } from '@/types/constant';
import { getBookImageUrl } from '@/utils';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const pageData = reactive({
  //分页相关模型数据
  role: '',
  currentPage: 1, // 当前页码
  pageSize: 15, // 每页显示的记录数
  total: 60, // 总记录数
  queryString: '', // 查询条件
});
const usersList = ref<Users[]>([]);

const getUsersListByPage = () => {
  http.post<ResponseData<UsersPageData>>('/newusers/page', pageData).then((res) => {
    usersList.value = res.data.list;
    pageData.total = res.data.total;
  });
};
const handleCurrentChange = (u: number) => {
  pageData.currentPage = u;
  getUsersListByPage();
};

const handleDelete = (id: number) => {
  ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      http.get<ResponseData>('/newusers/del', { id: id }).then((ResponseData) => {
        ElMessage({ type: 'success', message: ResponseData.msg });
        getUsersListByPage();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
};

onMounted(() => {
  getUsersListByPage();
});
</script>
<template>
  <Page class="users-view">
    <template #header>
      <div class="content-header">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <div class="filter-container">
      <el-input placeholder="邮箱/用户名/真实名称" v-model="pageData.queryString" class="filter-item" />
      <el-select v-model="pageData.role" placeholder="请选择角色" class="filter-item">
        <el-option v-for="item in USERS_OPTIONS" :key="item.value" :label="item.label" :value="item.label" />
      </el-select>
      <el-button @click="handleCurrentChange(1)">查询用户</el-button>
    </div>
    <el-table class="tableContainer" size="small" current-row-key="id" :data="usersList" stripe highlight-current-row>
      <el-table-column type="index" label="序号" width="50" align="center" />

      <el-table-column label="用户名" align="center">
        <template #default="scope">
          <div class="avatar-container">
            <div
              class="img-avatar"
              :style="{ backgroundImage: 'url(' + getBookImageUrl(scope.row.avatar) + ')' }"
            ></div>
            {{ scope.row.username }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="realname" label="真实名称" align="center" />
      <el-table-column prop="email" label="电子邮箱" width="180" align="center" />
      <el-table-column prop="college" label="学院(系)" align="center" />
      <el-table-column prop="major" label="专业" align="center" />

      <el-table-column prop="create_time" label="创建时间" align="center" />
      <el-table-column prop="update_time" label="上次登录时间" align="center" />

      <el-table-column prop="role" label="用户角色" align="center" />
      <el-table-column label="操作" align="center" width="220">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      size="small"
      class="pagination"
      @current-change="handleCurrentChange"
      :current-page="pageData.currentPage"
      :page-size="pageData.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="pageData.total"
    >
    </el-pagination>
  </Page>
</template>

<style>
.filter-container {
  display: flex;
  margin: 16px 0;
}
.filter-item {
  width: 200px;
  margin-right: 12px;
}
.pagination {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-image {
  display: inline-flex;
}
.img-fallback {
  width: 50px;
  height: 70px;
  box-shadow: 0 0 2px #333;
  margin: 5px;
  padding: 2px 0 0 5px;
  .img-fallback-text {
    font-weight: 900;
    color: #fe8738;
  }
}
.img-avatar {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position: center;
  background-size: cover;
  border-radius: 25px;
  background-repeat: no-repeat;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
</style>
